﻿<phone:PhoneApplicationPage 
    x:Class="MyToDoList.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="728" 
    
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">
	<phone:PhoneApplicationPage.Resources>

        <Style x:Key="ListBoxCheckedItemStyle" TargetType="ListBoxItem">
    		<Setter Property="Background" Value="Transparent"/>
    		<Setter Property="BorderThickness" Value="0"/>
    		<Setter Property="BorderBrush" Value="Transparent"/>
    		<Setter Property="Padding" Value="0"/>
    		<Setter Property="HorizontalContentAlignment" Value="Left"/>
    		<Setter Property="VerticalContentAlignment" Value="Top"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="ListBoxItem">
    					<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver"/>
    								<VisualState x:Name="Disabled">
    									<Storyboard>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
    										</ObjectAnimationUsingKeyFrames>
    										<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="SelectionStates">
    								<VisualState x:Name="Unselected"/>
    								<VisualState x:Name="Selected">
    									<Storyboard>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
    											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
    										</ObjectAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>
                            <StackPanel Orientation="Horizontal">
                                <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" />
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </StackPanel>
                        </Border>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
        
        <!--Style x:Key="ListBoxChecked_ItemStyle" TargetType="ListBoxItem">
        	<Setter Property="Background" Value="Transparent"/>
        	<Setter Property="BorderThickness" Value="0"/>
        	<Setter Property="BorderBrush" Value="Transparent"/>
        	<Setter Property="Padding" Value="0"/>
        	<Setter Property="HorizontalContentAlignment" Value="Left"/>
        	<Setter Property="VerticalContentAlignment" Value="Top"/>
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="ListBoxItem">
        				<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup x:Name="CommonStates">
        							<VisualState x:Name="Normal"/>
        							<VisualState x:Name="MouseOver"/>
        							<VisualState x:Name="Disabled">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        						<VisualStateGroup x:Name="SelectionStates">
        							<VisualState x:Name="Unselected"/>
        							<VisualState x:Name="Selected">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
        					<StackPanel Orientation="Horizontal">
        						<CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
        						<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
        					</StackPanel>
        				</Border>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style-->
        
	</phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot"  Background="Transparent">

        <!--Panorama control-->
        <controls:Panorama Title="my toDoList" Name="taskPanorama" SelectionChanged="taskPanorama_SelectionChanged">
            <controls:Panorama.Background>
                <ImageBrush ImageSource="/MyToDoList;component/Image/notebook_m1.png" Stretch="Fill"/>
            </controls:Panorama.Background>
 
            <!--Panorama item one-->
            <controls:PanoramaItem Header="ToDo">
                <!--Double line list with text wrapping-->
                <ListBox Margin="0,0,-12,0" x:Name="lsToDoTask" SelectionMode="Multiple" ItemContainerStyle="{StaticResource ListBoxCheckedItemStyle}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                                <StackPanel Orientation="Vertical" Margin="20,0,0,0">
                                <TextBlock Text="{Binding Title}" FontSize="35" Style="{StaticResource PhoneTextNormalStyle}"/>
                                <TextBlock Text="{Binding Description}" FontSize="25" Style="{StaticResource PhoneTextSmallStyle}"/>
                                </StackPanel>

                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PanoramaItem>
 
            <!--Panorama item two-->
            <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
            <controls:PanoramaItem Header="Done">
                <!--Double line list with image placeholder and text wrapping-->
                <ListBox Margin="0,0,-12,0"  x:Name="lsDoneTask" SelectionMode="Multiple" ItemContainerStyle="{StaticResource ListBoxCheckedItemStyle}" >
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                                
                                <StackPanel Orientation="Vertical" Margin="20,0,0,0">
                                <TextBlock Text="{Binding Title}" FontSize="35" Style="{StaticResource PhoneTextNormalStyle}"  />
                                <TextBlock Text="{Binding Description}" FontSize="25" Style="{StaticResource PhoneTextSmallStyle}"/>
                                </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default">
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.add.rest.png" Text="Add" x:Name="btAdd" Click="btAdd_Click" />
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.check.rest.png" Text="Done" x:Name="btDone" IsEnabled="True" Click="btDone_Click"/>
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.delete.rest.png" Text="Delete"  x:Name="btDelete" IsEnabled="True" Click="btDelete_Click"/>
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.edit.rest.png" Text="Edit" x:Name="btEdit" Click="btEdit_Click" IsEnabled="True" />        
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>